<template>
  <div>
    <div class="m-d-charts" id="forecast" v-loading="loading"></div>
  </div>
</template>

<script>
  import api from '../api/api'
  import echarts from 'echarts/lib/echarts'
  // 引入饼状图
  import 'echarts/lib/chart/pie';
  import 'echarts/lib/chart/line';
  import 'echarts/lib/component/title';
  import 'echarts/lib/component/legend';
  import 'echarts/lib/component/toolbox';
  import 'echarts/lib/component/markPoint';
  import 'echarts/lib/component/tooltip';

  export default {
    name: "relation-echarts",
    props: ['keywordId', 'timeRange'],
    data() {
      return {
        loading: true,
        fromDateString: '',
        toDateString: '',
        timeList: null,
        actualPositive: [],
        actualNegative: [],
        forecastPositive: [],
        forecastNegative: [],
      }
    },
    mounted() {
      this.forecast = echarts.init(document.getElementById('forecast'));
      this.getData();
      this.resize();
    },
    methods: {
      resize() {
        // echarts自适应页面
        const self = this;
        setTimeout(() => {
          window.onresize = function () {
            self.forecast.resize()
          }
        }, 20)
      },
      getData() {
        api.Trend({keywordId: this.keywordId, fromDateString: this.fromDateString, toDateString: this.toDateString})
          .then(res => {
            this.loading = false;
            this.timeList = res.listTimes;
            this.actualPositive = [];
            this.actualNegative = [];
            this.forecastPositive = [];
            this.forecastNegative = [];
            for(let i=0;i<res.listTimes.length;i++){
              this.actualPositive.push(res.actualPositive[res.listTimes[i]]);
              this.actualNegative.push(res.actualNegtive[res.listTimes[i]]);
              this.forecastPositive.push(res.forecastPositive[res.listTimes[i]]);
              this.forecastNegative.push(res.forecastNegtive[res.listTimes[i]]);
            }
            this.initData()
          }).catch(e => {
          console.log(e);
        });
      },
      initData() {
        const option = {
          toolbox: {
            show: true,
            itemSize: 20,
            right: 20,
            feature: {
              dataZoom: {show: false},
              dataView: {show: false},
              magicType: {show: false},
              restore: {show: false},
              saveAsImage: {}
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#0E6281'
              }
            }
          },
          grid: {
            left: '4%',
            right: '4%',
            bottom: '15%',
            height: '70%',
            containLabel: true
          },
          legend: {
            top: '5%',
            left: 'center',
            itemGap: 20,
            textStyle: {
              fontSize: 14
            },
            data: [
              {
                name: '实际正向',
                icon: 'stack'
              },
              {
                name: '实际负向',
                icon: 'stack'
              },
              {
                name: '正向预测',
                icon: 'stack'
              },
              {
                name: '负向预测',
                icon: 'stack'
              }
            ]
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: this.timeList,
              axisLine: {
                lineStyle: {
                  color: '#DEDEDE'
                }
              },
              axisTick: {
                show: false,
                alignWithLabel: true
              },
              axisLabel: {
                interval: 0,
                rotate: 45,
                margin: 8,
                fontSize: 12,
                color: '#333'
              },
              z: 10
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#675bba'
                }
              },
              axisTick: {
                show: false,
                alignWithLabel: true
              },
              axisLabel: {
                fontSize: 12,
                color: '#333'
              }
            }

          ],
          series: [
            {
              name: '实际正向',
              type: 'line',
              symbolSize: 10,
              itemStyle: {
                normal: {
                  color: '#4333EA',
                  lineStyle: {
                    color: '#4333EA'
                  }
                }
              },
              data: this.actualPositive
            },
            {
              name: '实际负向',
              type: 'line',
              symbolSize: 10,
              itemStyle: {
                normal: {
                  color: '#22D8EF',
                  lineStyle: {
                    color: '#22D8EF'
                  }
                }
              },
              data: this.actualNegative
            },
            {
              name: '正向预测',
              type: 'line',
              symbolSize: 10,
              itemStyle: {
                normal: {
                  color: '#F15959',
                  lineStyle: {
                    color: '#F15959'
                  }
                }
              },
              data: this.forecastPositive
            },
            {
              name: '负向预测',
              type: 'line',
              symbolSize: 10,
              itemStyle: {
                normal: {
                  color: '#0067F5',
                  lineStyle: {
                    color: '#0067F5'
                  }
                }
              },
              data: this.forecastNegative
            }
          ]
        };
        this.forecast.setOption(option);
      }
    },
    watch: {
      keywordId() {
        this.forecast.clear();
        this.loading = true;
        this.getData()
      },
      timeRange() {
        if (this.timeRange == null) {
          this.fromDateString = '';
          this.toDateString = ''
        } else {
          this.fromDateString = this.timeRange[0];
          this.toDateString = this.timeRange[1];
        }
        this.forecast.clear();
        this.loading = true;
        this.getData()
      }
    }
  }
</script>

<style scoped lang="less">

</style>
